<template>
  <div class="item" @click="fn()">
      <template v-if="flga">
        <slot name="active"></slot>
      </template>
      <template v-if="!flga">
          <slot name="normal"></slot>
      </template>
    <div :class="{active:flga}">{{ txt }}</div>
  </div>
</template>

<script>
export default {
  props: ["txt","mark",'crru'],
  computed:{
      flga(){
          return this.mark == this.crru
      }
  },
  methods: {
      fn(){
          this.$emit('change',this.mark)
          this.$router.push('/'+this.mark).catch(err=>{})
      }
  },
};
</script>

<style scoped>
.item{
    flex: 1;
    text-align: center;
}
img {
  width: .5rem;
  display: inline-block;
}
.active{
    color: #42bd56;
}
</style>